import { Button, InputNumber, message } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import TabBtn from "renderer/components/TabBtn";
import useGlobal from "renderer/hooks/useGlobal";
import './Setting.less'


interface ISettingState {
  port: number
}


export default function Setting() {

  const navigate = useNavigate()

  const { config } = useGlobal()

  const [ settingState, setSettingState ] = useState<ISettingState>({
    port: config.port
  })

  const handleSettingSureClick = async () => {
    const localCfg = await window.electron.ipcRenderer.getStoreValue('local-config')
    const cfg = {...localCfg, port: settingState.port}
    
    window.electron.ipcRenderer.setStoreValue('local-config', cfg)

    message.info('端口更新成功，请重写客户端！')
  }

  // console.log('1111')

  return (
    <div className="setting-page" >
      <div className="setting-header">
        <div className="setting-header-left">
          <Button type="link" className="back-btn" onClick={() => navigate("/home", {replace: true})} >返回</Button>
          <label className="setting-label" >系统设置</label>
        </div>
      </div>
      <div className="setting-content" >
        <div className="setting-left" >
          <TabBtn select >系统设置</TabBtn>
        </div>
        <div className="setting-right" >
          <div className="server-port" >
            <label>本地服务端口</label>
            <InputNumber className="setting-input" 
              size="large"
              controls={false}
              min={0}
              precision={0}
              value={settingState.port}
              onChange={value => setSettingState({...settingState, port: value})}
            />
            <span>重启客户端生效</span>
          </div>

          <Button className="setting-sure-btn" type="primary" onClick={handleSettingSureClick} >确认</Button>
        </div>
      </div>
    </div>
  )
}